<template>
  <!-- 表格 -->
  <el-table border :data="config.data" style="width: 100%" class="gz-table">
    <el-table-column
      align="center"
      header-align="center"
      v-for="item in config.columns"
      :key="item.prop"
      :prop="item.prop"
      :label="$t(`table.${item.label}`)"
      :fixed="item.fixed"
      :width="item.width"
    >
      <template v-slot="{ row }" v-if="item.slot">
        <slot :name="item.slot" :row="row"></slot>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    class="pagination"
    v-model:currentPage="formQuery.pagenum"
    background
    layout="slot,sizes, prev, pager, next"
    :hide-on-single-page="false"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="formQuery.pagesize"
    :total="config.pagination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <span>共{{ config.pagination.total }}条</span>
  </el-pagination>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
// import { ref, onMounted, defineProps } from "vue";
// import { ElMessage, ElMessageBox } from "element-plus";
// import { useI18n } from "vue-i18n";
// const i18n = useI18n();
const formQuery = ref({
  query: "",
  pagenum: 1,
  pagesize: 10
});

const props = defineProps({
  config: { type: Object }
});
const emits = defineEmits(["updateList"]);
console.log(props.config);

const handleSizeChange = (pagesize) => {
  formQuery.value.pagenum = 1;
  formQuery.value.pagesize = pagesize;
  emits("updateList", formQuery.value);
};
const handleCurrentChange = (pagenum) => {
  formQuery.value.pagenum = pagenum;
  emits("updateList", formQuery.value);
};
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin: 20px 0;
}
</style>
